<template>
  <!--<el-menu :default-active="defaultActive" class="menu" unique-opened>-->
  <el-menu :default-active="defaultActive" unique-opened>
    <el-menu-item @click="addTab({text: 'index'})" index="1"><template slot="title"><i class="el-icon-menu"></i>首页</template></el-menu-item>
    <el-submenu :index="item.menu_id" v-for="(item, index) in data[0].menuArray" :key="index">
      <template slot="title"><i class="el-icon-menu"></i>{{item.menu_name}}</template>
      <el-menu-item v-if="secondArray.menuArray.length==0"  v-for="(secondArray,index) in item.menuArray" @click="addTab(secondArray)" :index="secondArray.menu_id" :key="index">
        {{secondArray.menu_name}}
      </el-menu-item>
      <el-submenu v-if="secondArray.menuArray.length!=0" v-for="(secondArray,index) in item.menuArray" :index="secondArray.menu_id" :key="index">
        <template  slot="title">{{secondArray.menu_name}}</template>
        <el-menu-item v-if="threeArray.menuArray.length==0" v-for="(threeArray,index) in secondArray.menuArray"  @click="addTab(threeArray)" :index="threeArray.menu_id" :key="index">
          {{threeArray.menu_name}}
        </el-menu-item>
        <el-submenu v-if="threeArray.menuArray.length!=0" v-for="(threeArray,index) in secondArray.menuArray" :index="threeArray.menu_id" :key="index">
          <template  slot="title">{{threeArray.menu_name}}</template>
          <el-menu-item v-for="(fourArray,index) in threeArray.menuArray"  @click="addTab(fourArray)" :index="fourArray.menu_id" :key="index">
            {{fourArray.menu_name}}
          </el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-submenu>
  </el-menu>
</template>
<script>
  export default {
    props: {
      'data': ''
    },
    methods: {
      addTab (val) {
        if (val.text === 'index') {
          let _data = {
            menu_id: '1',
            menu_name: '首页',
            tabIndex: '1',
            per_controller: 'index',
            selMenu: '1'
          }
          this.$store.dispatch('addTab', _data)
        } else {
          console.log(val)
          val.selMenu = val.menu_id
          this.$store.dispatch('addTab', val)
        }
      }
    },
    computed: {
      defaultActive () {
        console.log(this.$store.state.tab.selMenu)
        return this.$store.state.tab.selMenu
      }
    },
    watch: {
      defaultActive (curVal, oldVal) {  // 监听 更新状态 查询list
        console.log(curVal)
        this.selMenu = curVal
      }
    }
  }
</script>
<style>
  .el-menu a {
    text-decoration: none;
  }
  .menu {
    background-color: #eef1f6;
  }
</style>
